<template>
	<view>
		<music title="歌单" :iconList="['&#xe728;','&#xe600;']"></music>
		<view class="appBG" :style="{backgroundImage:'url('+ myData.playlist.coverImgUrl +')'}">
			<!-- playCount点击人数 -->
			
			<view class="topBg" >
				<view class="topBgLeft">
					<view class="topBgLeftContent">
						<image :src="myData.playlist.coverImgUrl"></image>
					</view>
				</view>
				<view class="topBgRight">
					<view>
						{{myData.playlist.name}}
					</view>
					<view>
						<view>
							<image class="image1" src="../../static/images/wangyiyunyinyue.png"></image>
						</view>
						网易云音乐
					</view>
					<view>
						{{myData.playlist.description}}
					</view>
				</view>
			</view>
			
			<view class="containerBg">
				<view class="containerBgTop" >
					<view class="image3">
						<image src="../../static/images/mti-播放2.png"></image>
					</view>
					<view>
						播放全部(共
							{{myDataLength}}
						首)
					</view>
				</view>
				<template v-for="(item,index) in myData.playlist.tracks">
					<view class="containerBgContant" @click="toPalyMusic(item.id)">
						<view class="containerBgContantLeft">{{index + 1}}</view>
						<view class="containerBgContantCenter">
							<view>
								<view>
									<view>{{item.name}}</view>
									<view class="containerBgContantCenterImage">
										<image class="image2" src="../../static/images/sq.png"></image>
										
										<template  v-for="(it1,id1) in item.ar">
											<view style="margin-right: 10rpx;">
												{{it1.name}}
											</view>
										</template>
									</view>
								</view>
							</view>
						</view>
						<view class="containerBgContantRight">
							<image src="../../static/images/mti-播放2.png"></image>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import music from "@/component/musciHead/musciHead.vue";
	import '@/common/iconfont.css';
	import {onMounted, ref} from "vue";
	import {useRoute} from 'vue-router';
	
	let myData = ref({
		playlist:{}
	})
	let myDataLength = ref(100)
	components: {
		music
	} 
	onMounted(()=>{
		const id = useRoute().query.id;
		console.log(id)
		uni.request({
			url:"http://localhost:3000/playlist/detail?id=" + id,
			success: (ref) =>{
				// console.log(ref.data)
				myData.value = ref.data;
				// myDataLength = myData.value.length;
				console.log(myData.value)
			}
		})
	})
	
	function toPalyMusic(id){
		console.log("传入下一行的Id",id)
		uni.navigateTo({
			url: "/pages/demo02/demo02?id=" + id
		}) 
		
	}
</script>

<style lang="scss" scoped>
	.appBG{
		
		// background-color: lightskyblue;
	}

	.topBg{
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: row;
		
		.topBgLeft{
			margin-top: 50rpx;
			width: 40%;
			height: 100%;
			/* background: #000; */
			display: flex;
			/* align-items: center; */
			justify-content: center;
			.topBgLeftContent{
				
				image{
					width: 250rpx;
					height: 250rpx;
				}
				// background-color: aliceblue;
			}
		}
		.topBgRight{
			margin-top: 50rpx;
			width: 60%;
			height: 100%;
			/* background-color: aqua; */
			> view{
				margin: 10rpx;
				margin-left: 20rpx;
			}
			
			>:nth-child(1){
				font-weight: 800;
				font-size: 32rpx;
				color: aliceblue;
			}
			>:nth-child(2){
				display: flex;
				flex-direction: row;
				image{
					margin-right: 10rpx;
					border-radius: 50rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	
	.containerBg{
		width: 100%;
		// height: 800rpx;
		background-color: aliceblue;
		border-top-right-radius: 30px;
		border-top-left-radius: 30px;
		.containerBgTop{
			display: flex;
			flex-direction: row;
			
			> view{
				margin-left: 30rpx;
				margin-top: 30rpx;
			}
			>:nth-child(1){
				image{					
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		.containerBgContant{
			margin: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.containerBgContantLeft{
				display: flex;
				justify-content: center;
					
				width: 100rpx;
				height: 100rpx;
			}
			.containerBgContantCenter{			
				width: 500rpx;
				image{
			
					margin-top: 5rpx;
					margin-right: 5rpx;
					width: 40rpx;
					height: 30rpx;
				}
				.containerBgContantCenterImage{
					/* background-color: black; */
					
					display: flex;
					flex-direction: row;
					
					
					
				}
			}
			.containerBgContantRight{
				width: 100rpx;
				height: 100rpx;
				justify-content: center;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	.image1{
		/* 网易图标 */
		margin-right: 10rpx;
		border-radius: 50rpx;
		width: 50rpx;
		height: 50rpx;
	}
	
	.image2{
			/* SQ标志 */	 
		margin-top: 5rpx;
		margin-right: 5rpx;
		width: 40rpx;
		height: 30rpx;
	}
	.image3{
		/* 播放全部图标 */
		width: 50rpx;
		height: 50rpx;
	}
</style>
